<template>
  <div>
    <!-- 顶部返回 -->
    <nav-bar title="订单详情" is-arrow isBackUp />
    <div class="home">
      <!-- 配送进程 -->
      <order-course :orderState="shopInfoObj.orderState" />
        <!-- 商家类型 -->
        <shop-order-detail
          v-if="[1, 2, 3, 4, 5].indexOf(shopInfoObj.orderType) > -1"
          :shopInfoObj="shopInfoObj"
          :isManage="true"
          @toPhone="toPhone"
        />
        <!-- 二手 -->
        <secondary-order-detail
          v-if="shopInfoObj.orderType === 8"
          :shopInfoObj="shopInfoObj"
        />
        <!-- 快递 -->
        <express-order-detail
          v-if="[6, 7].indexOf(shopInfoObj.orderType) > -1"
          :shopInfoObj="shopInfoObj"
          @toPhone="toPhone"
          @imagePreview="imagePreview"
        />
        <!-- 领跑者 -->
        <order-people-order-detail
          v-if="shopInfoObj.orderType === 9"
          :shopInfoObj="shopInfoObj"
          @toPhone="toPhone"
          @imagePreview="imagePreview"
        />
      <!-- 订单信息 -->
      <order-info :shopInfoObj="shopInfoObj" />
      <!-- <div v-if="shopInfoObj.payState === 2" class="btn_warp">
        <van-button class="btn" round @click="toPayment(shopInfoObj.cOrderSn)"
          >去支付</van-button
        >
      </div> -->
  </div>
</template>
<script>
import { getData, upData } from '@/api/api.js'

import NavBar from '@/components/common/NavBar.vue'

import OrderCourse from '@/components/orderDetail/OrderCourse.vue'
import OrderInfo from '@/components/orderDetail/OrderInfo.vue'
import ShopOrderDetail from '@/components/orderDetail/ShopOrderDetail.vue'
import SecondaryOrderDetail from '@/components/orderDetail/SecondaryOrderDetail.vue'
import ExpressOrderDetail from '@/components/orderDetail/ExpressOrderDetail.vue'
import OrderPeopleOrderDetail from '@/components/orderDetail/OrderPeopleOrderDetail.vue'

import { ImagePreview } from 'vant'

export default {
  components: {
    NavBar,
    OrderCourse,
    OrderInfo,
    ShopOrderDetail,
    SecondaryOrderDetail,
    ExpressOrderDetail,
    OrderPeopleOrderDetail,
  },
  data() {
    return {
      shopInfoObj: {},
      cOrderSn: '',
    }
  },
  created() {
    this.cOrderSn = this.$route.query.cOrderSn
    this.getShopOrderInfo()
  },
  methods: {
    // 获取商家订单信息
    async getShopOrderInfo() {
      const res = await getData(
        '/order/info/detail/find',
        { cOrderSn: this.cOrderSn },
        { showLoading: true }
      )
      console.log(res)
      if (res.code === '0') {
        this.shopInfoObj = res.data
        if ([1, 2, 3, 4, 5].indexOf(this.shopInfoObj.orderType) > -1) {
          // 拼接商品选择的规格和属性
          this.shopInfoObj.shopOrderDetailType.shopOrderProductVo.forEach(
            (e) => {
              e.shopType = ''
              if (Object.keys(e.orderProductSpecification).length > 0) {
                e.shopType +=
                  e.orderProductSpecification.specificationName + ';'
              }
              if (e.orderProductProertyValues.length > 0) {
                orderProductProertyValues.forEach((c) => {
                  e.shopType += c.propertyValue + ';'
                })
              }
            }
          )
        }
        return false
      }
      this.$handleCode.handleCode(res)
    },
    toPhone(shopPhone) {
      window.location.href = 'tel:' + shopPhone
    },
    // 预览图片
    imagePreview(item, index) {
      const imgUrlList = []
      item.forEach((e) => {
        imgUrlList.push(this.imgBaseUrl + e.picAddress)
      })
      ImagePreview({
        images: imgUrlList,
        startPosition: index,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.home {
  padding: 1rem;
  margin-bottom: 8rem;
  .btn_warp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    .btn {
      width: @buttonWidth;
      //   color: #ff6f4e;
      //   border: 1px solid #ff6f4e;
      color: #fff;
      background-color: #ff6f4e;
    }
  }
}
::v-deep .van-step__title {
  font-size: 0.75rem;
}
::v-deep .van-step__circle {
  width: 0.8rem;
  height: 0.8rem;
}
::v-deep .van-icon {
  font-size: 1rem;
}
</style>